<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">

  </div>
  <div id="con"></div>
  <script src="./vue.js"> </script>
  <script>    
    // Vue.extend 是vue的构造器，创建一个可以new的组件
      let CarCom=Vue.extend({
        template:`<div>
              <h1>你好{{msg}} {{sex}}</h1>
          <div>`,
        data(){
          return {
            msg:"周杰伦"
          }
        },
         props:{
          sex:{
            type:String,
            default:"男"
          }
         },
        methods:{

        }

      })
      // propsData 给vue.extend的组件的props传值
      let mycom=new CarCom({propsData:{sex:"人妖"}})
      mycom.$mount("#app")
      
      let com2=new CarCom({propsData:{sex:"女"}})
      com2.$mount("#con")
      
  </script>
</body>
</html>